<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-col :span="5">
          <el-form-item label="功能房" prop="roomName">
            <el-input v-model="queryParams.roomName" placeholder="请输入功能房名" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="使用状态" prop="rtState">
            <el-select v-model="queryParams.rtState" placeholder="请选择使用状态" clearable>
              <el-option v-for="dict in dict.type.routine_rtfureservation_rt_state" :key="dict.value"
                :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="审批状态" prop="auStatus">
            <el-select v-model="queryParams.auStatus" placeholder="请选择审批状态" clearable>
              <el-option v-for="dict in dict.type.rt_fu_audit_au_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item style="margin-left: 100px;">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="margin-left: 20px;">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col :span="5">
          <el-form-item label="申请人" prop="rtCreatRole">
            <el-input v-model="queryParams.rtCreatRole" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="1.5" style="text-align: right;">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['staff:oneStopCommunityConstruction:export']">导出</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :border="true" :data="reservationList" class="custom-table">
      <el-table-column label="序号" align="center" width="66" prop="id" />
      <el-table-column label="申请人" align="center" width="120" prop="rtCreatRole" />
      <el-table-column label="使用部门/学院" align="center" width="140" prop="rtDepar" />
      <el-table-column label="功能房名称" align="center" width="130" prop="roomName" />
      <el-table-column label="主题" align="center" width="100" prop="rtTheme" />
      <el-table-column label="试用期间图片" align="center" width="120" prop="resPath">
        <template slot-scope="scope">
          <div class="images">
            <template v-if="scope.row.resPath && scope.row.resPath.length > 0">
              <el-image style="width: 100px; height: 100px;"
                :src="baseUrl + scope.row.resPath.split(',')[0]"></el-image>
            </template>

            <template v-else>
              <span>没有照片</span>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="参与人员类型" align="center" width="120" prop="rtRole" />
      <el-table-column label="参与人数" align="center" width="60" prop="rtPeople" />
      <el-table-column label="预约用途" align="center" width="90" prop="rtPurpose" />
      <el-table-column label="预约时间段" align="center" width="150" prop="rtYuyue" />
      <el-table-column label="使用状态" align="center" width="90" prop="rtState">
        <template slot-scope="scope" v-if="scope.row.audit.auStatus != 2">
          <dict-tag :options="dict.type.routine_rtfureservation_rt_state" :value="scope.row.rtState" />
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" width="90" prop="auStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.rt_fu_audit_au_status" :value="scope.row.audit.auStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div style="display: flex;">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看详情</el-button>
            <el-button v-if="scope.row.rtState === 2" size="mini" type="text"
              @click="goReservation()">使用结束反馈</el-button>
            <el-button v-if="scope.row.audit.auStatus == 0" size="mini" type="text"
              @click="handleAudit(scope.row)">审批</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改功能房预约对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="功能房名" prop="roomName">
          <el-input v-model="form.roomName" placeholder="请输入功能房名" />
        </el-form-item>
        <el-form-item label="主题" prop="rtTheme">
          <el-input v-model="form.rtTheme" placeholder="请输入主题" />
        </el-form-item>
        <el-form-item label="参与人数" prop="rtPeople">
          <el-input v-model="form.rtPeople" placeholder="请输入参与人数" />
        </el-form-item>
        <el-form-item label="预约时间" prop="rtTime">
          <el-input v-model="form.rtTime" placeholder="请输入预约时间" />
        </el-form-item>
        <el-form-item label="审批状态" prop="rtStatus">
          <el-input v-model="form.rtStatus" placeholder="请输入审批状态" />
        </el-form-item>
        <el-form-item label="使用状态0未使用" prop="rtState">
          <el-input v-model="form.rtState" placeholder="请输入使用状态0未使用" />
        </el-form-item>
        <el-form-item label="图片存储" prop="rtImgs">
          <image-upload v-model="form.rtImgs" />
        </el-form-item>
        <el-form-item label="创建角色" prop="rtCreatRole">
          <el-input v-model="form.rtCreatRole" placeholder="请输入创建角色" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 审批弹出框 -->
    <el-dialog :title="title" :visible.sync="outerVisible">
      <!-- 内层弹出框 -->
      <div style="height: 60vh;padding: 20px; position: relative;">
        <el-dialog width="40%" title="不同意说明" :visible.sync="innerVisible" append-to-body
          style="position: absolute; top: 100px;">
          <div style="display: flex; height: 30vh; justify-content: center; margin-top: 50px;"> <label>不同意说明</label>
            <el-input style="width: 70%; margin-left: 20px;" type="textarea" :rows="4" placeholder="请输入内容"
              v-model="queryParams.reason">
            </el-input>
            <div style="position: absolute; bottom: 20px; right: 10px;">
              <el-button @click="innerVisible = false" style="margin-right: 10px;">取 消</el-button>
              <el-button @click="disAgree" style="margin-right: 10px;">确定</el-button>
            </div>
          </div>
        </el-dialog>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="10" class="custom-left">
              <el-form-item label="主题" prop="rtTheme">
                <el-input v-model="form.rtTheme" placeholder="请输入主题" />
              </el-form-item>
            </el-col>
            <el-col :span="10" class="custom-right">
              <el-form-item label="参与人数" prop="rtPeople">
                <el-input v-model="form.rtPeople" placeholder="请输入参与人数" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" class="custom-left">
              <el-form-item label="人员类型" prop="rtRole">
                <el-select v-model="form.rtRole" placeholder="选择参与人员类型" clearable>
                  <el-option v-for="dict in dict.type.routine_rtfureservation_rt_role" :key="dict.value"
                    :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="custom-right">
              <el-form-item label="预约用途" prop="rtPurpose">
                <el-select v-model="form.rtPurpose" placeholder="选择预约用途" clearable>
                  <el-option v-for="dict in dict.type.routine_rtfureservations_rt_purpose" :key="dict.value"
                    :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" class="custom-left">
              <el-form-item label="预约时间段">
                <div style="display: flex;">{{ form.rtTime }}/{{ form.roStartTime }}-{{ form.roEndTime }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="  position: absolute; bottom: 20px; right: 10px;">
          <el-button @click="outerVisible = false" style="margin-right: 10px;">取 消</el-button>
          <el-button @click="approveAudit" style="margin-right: 10px;">同意</el-button>
          <el-button @click="innerVisible = true">不同意</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 使用反馈弹出框 -->
    <el-dialog :title="title" :visible.sync="feedback" append-to-body>
      <div style="display: flex; height: 50vh; justify-content: center; margin-top: 100px;"> <label>使用反馈</label>
        <el-input style="width: 70%; margin-left: 50px;" type="textarea" :rows="10" placeholder="请输入内容"
          v-model="textarea1">
        </el-input>
        <div style="position: absolute; bottom: 20px; right: 10px;">
          <el-button @click="feedback = false" style="margin-right: 50px;">取 消</el-button>
          <el-button style="margin-right: 50px;">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看详情弹出框 -->
    <el-dialog :title="title" :visible.sync="openDetail" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="功能房名" prop="roomName">
              {{ form.roomName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主题" prop="rtTheme">
              {{ form.rtTheme }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请人" prop="rtCreatRole">
              {{ form.rtCreatRole }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用部门/学院" prop="rtDepar">
              {{ form.rtDepar }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="参与人数" prop="rtPeople">
              {{ form.rtPeople }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间" prop="rtTime">
              {{ form.rtTime }} {{ form.roStartTime }} - {{ form.roEndTime }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="不同意原因" v-if="form.audit && form.audit.reason && form.audit.reason.trim() !== ''">
              {{ form.audit.reason }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelDetail">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listReservation, getReservation, delReservation, addReservation, updateReservation, myReverDetail } from "@/api/routine/reservation";
import { updateAudit } from "@/api/routine/audit";

export default {
  name: "Reservation",
  dicts: ['routine_rtfureservation_rt_state', 'rt_fu_audit_au_status', 'routine_rtfureservation_rt_role', 'routine_rtfureservations_rt_purpose'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 功能房预约表格数据
      reservationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomName: null,
        rtTheme: null,
        rtRole: null,
        rtPeople: null,
        rtPurpose: null,
        rtTime: null,
        rtStatus: null,
        rtState: null,
        rtImgs: null,
        rtCreattime: null,
        rtCreatRole: null,
        rtDepar: null,
        rtYuyue: null,
        auStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      outerVisible: false,
      innerVisible: false,
      feedback: false,
      textarea1: '',
      baseUrl: process.env.VUE_APP_BASE_API,
      openDetail: false,

    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询功能房预约列表 */
    getList() {
      this.loading = true;
      listReservation(this.queryParams).then(response => {
        this.reservationList = response.rows.map(item => ({
          ...item,
          rtYuyue: `${item.rtTime}  ${item.roStartTime} ~ ${item.rtTime} ${item.roEndTime}`,
          // resPath:item.rtFuResourceList[0].resPath
        }));
        console.log(this.reservationList);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelDetail() {
      this.openDetail = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        roomName: null,
        rtTheme: null,
        rtRole: null,
        rtPeople: null,
        rtPurpose: null,
        rtTime: null,
        rtStatus: null,
        rtState: null,
        rtImgs: null,
        rtCreattime: null,
        rtCreatRole: null,
        auStatus: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加功能房预约";
    },
    /** 查看详情按钮操作 */
    handleDetail(row) {
      this.reset();
      const id = row.id || this.ids
      getReservation(id).then(response => {
        this.form = response.data;
        this.openDetail = true;
        this.title = "查看功能房详情";
        console.log(this.form);
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateReservation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addReservation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除功能房预约编号为"' + ids + '"的数据项？').then(function () {
        return delReservation(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('routine/reservation/export', {
        ...this.queryParams
      }, `reservation_${new Date().getTime()}.xlsx`)
    },
    // 审批弹出框
    handleAudit(row) {
      console.log(row);
      console.log(row.audit.id)
      this.title = "预约审批"

      this.selectedAudit = row.audit.id;
      console.log(this.selectedAudit);
      getReservation(row.id).then(response => {
        this.form = response.data;
      });
      this.outerVisible = true;
    },
    //审批
    approveAudit() {
      const approvalData = {
        id: this.selectedAudit,
        auStatus: 1,
      };
      console.log(approvalData);
      updateAudit(approvalData).then(response => {
        this.$message.success("审批成功");
        this.outerVisible = false;
        this.getList();
      }).catch(error => {
        this.$message.error("审批失败：" + error.message);
      });
    },
    //不同意理由
    disAgree() {
      const disAgree = {
        id: this.selectedAudit,
        reason: this.queryParams.reason,
        auStatus: 2 // 将审批状态更新为2，表示不同意
      };
      updateAudit(disAgree).then(response => {
        this.$message.success("提交成功");
        this.innerVisible = false;
        this.getList();
      }).catch(error => {
        this.$message.error("提交失败：" + error.message);
      });
      this.innerVisible = false;
      this.outerVisible = false;
    },
    goReservation() {
      this.feedback = true
      this.title = "添加使用结束反馈"
    }
  }
};
</script>
<style scoped>
.custom-table {
  /* 设置表格内容居中 */
  text-align: center;
}

/* 如果需要调整表头也居中，可以添加以下样式 */
.custom-table .el-table__header th {
  text-align: center;
}

.custom-left {
  margin-right: 100px;
  margin-bottom: 30px;
}
</style>
